<template>
  <table class="tableInfo" style="background-color: white;">
    <tbody>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">Device Name	</label>
        </td>
        <td id="Product">{{ infoForm.productName }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">MES Lot ID	</label>
        </td>
        <td id="Product">{{ infoForm.lotId }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">MES Work Flow	</label>
        </td>
        <td id="Product">{{ infoForm.processFlow }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">Package	</label>
        </td>
        <td id="Product">{{ infoForm.packageType }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">Customer	</label>
        </td>
        <td id="Product">{{ infoForm.custName }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">Customer Lot		</label>
        </td>
        <td id="Product">{{ infoForm.custLotID }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">Work Order	</label>
        </td>
        <td id="Product">{{ infoForm.workOrder }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">Equipment Status	</label>
        </td>
        <td id="Product">{{ infoForm.eqpStatusMsg }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">Status Msg	</label>
        </td>
        <td id="Product">{{ infoForm.eqpStatusMsg }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">Test Step	</label>
        </td>
        <td id="Product">{{ infoForm.trStep }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">MES Lot QTY	</label>
        </td>
        <td id="Product">{{ infoForm.lotQty }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">Current Qty	</label>
        </td>
        <td id="Product">{{ infoForm.testedQty }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">Total Tested Qty	</label>
        </td>
        <td id="Product">{{ infoForm.totalTestedQty }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">Average Yield UPH	</label>
        </td>
        <td id="Product">{{ infoForm.averageYieldUPH }}</td>
      </tr>
      <tr>
        <td width="50%" style="background-color: rgb(217, 237, 247);">
          <label class="control-label text-info">Real-Time Yield UPH	</label>
        </td>
        <td id="Product">{{ infoForm.realtimeYieldUPH }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  name: 'InfoTable',
  components: {},
  props: {
    infoForm: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>
<style lang='scss' scoped>
  table {
    max-width: 100%;
    box-sizing: border-box;
    border-spacing:0;
  }
  .tableInfo {
    border: 1px solid #dddddd;
    width: 100%;
    table-layout: fixed;
    .text-info {
      color: #3a87ad;
    }
    tr td {
      padding: 0 6px;
      border-top: 1px solid #dddddd;
      border-right: 1px solid #dddddd;
    }
  }
</style>
